<template>
  <view class="main">
    <view class="banner">
      <view class="product-icon"><image v-if="productDetail.productIconUrl" class="image_icon" :src="productDetail.productIconUrl" mode="widthFix" /></view>
			<swiper class="swiper" circular  @change="handleBannerChange">
				<swiper-item v-for="(item, index) in productDetail.images" :key="index">
					<view class="swiper-item">
            <image class="image" :src="item.url" mode="aspectFill" />
          </view>
				</swiper-item>
			</swiper>
      <view class="banner-indicator">
         <text>{{bannerIndex + 1}} </text> /   <text class="indicator-total">{{productDetail.images.length}} </text> 
      </view>
		</view>
    <view class="desc">
      <view class="p-title">{{productDetail.productName}}</view>
      <view class="p-tags">
        <view class="tag-item tag-point" >可参与积分</view>
        <view class="tag-item tag-cashback" >可参与返现</view>
      </view>
      <view class="p-desc">
        <view class="price">
          <text>￥</text> 
          <text class="integer-price" v-if="priceData.integerPrice">{{priceData.integerPrice}}</text> 
          <text class="decimal-price" v-if="priceData.decimalPrice !== 0">{{priceData.decimalPrice}}</text>
        </view>
        <view class="code">编号：{{productDetail.productCode}}</view>
      </view>
      
    </view>
    <view class="detail">
      <rich-text :nodes="productDetail.detailInfo"></rich-text>
    </view>
    <view class="footer">
      <view class="footer-left">
        <view class="footer-icons">
          <text class="iconfont icon-home" ></text>
          <view>商城首页</view>
        </view>
        <view class="footer-icons">
          <text class="iconfont icon-cart" ></text>
          <view>购物车</view>
        </view>
      </view>
      <view class="footer-right">
        <view class="footer-btn btn-join-cart">加入购物车</view>
        <view class="footer-btn btn-buy-now">立即下单</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import Product from '@/components/product/Product.vue' ;

import { getProductDetailApi } from '@/api/product'
const pid = ref()
const bannerIndex = ref(0)
const productDetail = ref({
  images: []
})
onLoad((options)=> {
  pid.value = options.pid
  console.log('options', options)
  init()
})
onPullDownRefresh( async ()=> {
  await init().finally(() => {
    uni.stopPullDownRefresh();
  });
})

const priceData = computed(()=> {
  let price = productDetail.value.price;
  if(price) {
    price = price.toFixed(2)
    console.log('price', price)
    const [ integerPrice, decimalPrice] = price.split('.')
    // return price.split('.')[0]
    return {
      integerPrice,
      decimalPrice: '.' + decimalPrice
    }
  }
  return  {
    integerPrice: 0,
    decimalPrice: 0,
  }
})


async function init(){
  await getProductDetail()
}

async function getProductDetail(){
  const res = await getProductDetailApi({'pid': pid.value})
  const { detailInfo } = res
  productDetail.value = {
    ...res,
    detailInfo: detailInfo.replace(new RegExp(/\<img/gi), '<img class="richImg com"')
  }
}

function handleBannerChange(e){
  bannerIndex.value = e.detail.current
}


</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background: #F4F6F8;
  padding-bottom: 140rpx;
  .banner{
    height: 100vw;
    position: relative;
    .product-icon{
      position: absolute;
      left: 0;
      top: 0;
      width: 154rpx;
      z-index: 5;
      // height: 134rpx;
      .image_icon{
        width: 154rpx;
      }
    }
    .banner-indicator{
      position: absolute;
      right: 0;
      bottom: 40rpx;
      width: 98rpx;
      height: 32rpx;
      line-height: 32rpx;
      padding-left: 16rpx;
      background: #333333;
      border-radius: 55rpx  0rpx  0rpx 55rpx;
      opacity: 0.5;
      font-size: 24rpx;
      color: #FFFFFF;
      .indicator-total{
        font-size: 18rpx;
      }
    }
    .swiper{
      height: 100vw;
    }
    .image{
      width: 100vw;
      height: 100vw;
    }
  }
  .desc{
    padding: 32rpx;
    background: #fff;
    margin-bottom: 20rpx;
    .p-title{
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      line-height: 40rpx;
      margin-bottom: 16rpx;
    }
    .p-tags{
      display: flex;
      margin-bottom: 40rpx;
      column-gap: 16rpx;
      .tag-item{
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 12rpx;
        border-radius: 5rpx;
        color: #fff;
        font-size: 22rpx;
      }
      .tag-point{
        background: linear-gradient( 270deg, #FF8F1F 0%, #FFC892 99%);
      }
      .tag-cashback{
        background: linear-gradient( 270deg, #3662EC 0%, #7C9CFF 100%);
      }
    }
    .p-desc{
      display: flex;
      justify-content: space-between;
      .price{
        font-weight: 400;
        font-size: 24rpx;
        color: #FA5151;
        line-height: 36rpx;
        .integer-price{
          font-size: 48rpx
        }
        .decimal-price{
          font-size: 32rpx
        }
      }
      .code{
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 32rpx;
      }
    }
  }
  .detail{
    padding: 32rpx;
    background: #fff;
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
    line-height: 32rpx;
  }
  .footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 120rpx;
    background: #FFFFFF;
    display: flex;
    padding: 20rpx 32rpx;
    justify-content: space-between;
    .footer-left{
      display: flex;
      column-gap: 40rpx;
      .footer-icons{
        width: 88rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #666666;
        // line-height: 32rpx;
        text-align: center;
        .iconfont{
          font-size: 48rpx;
        }
      }
    }
    .footer-right{
      width: 430rpx;
      height: 80rpx;
      display: flex;
      border-radius: 40rpx;
      overflow: hidden;
      .footer-btn{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 26rpx;
        color: #FFFFFF;
      }
      .btn-join-cart{
        background: linear-gradient( 90deg, #FF8E18 0%, #FFCE1E 100%);
      }
      .btn-buy-now{
        background: linear-gradient( 90deg, #F01226 0%, #FE5D33 100%);
      }
    }
  }
}
rich-text .richImg {
  width: 100% !important;
  height: 100% !important;
  vertical-align: top;
}
</style>
